<template>
  <div class="top-container">
    <img class="top-image" src="@/assets/img/colorful-sky-clouds.png" alt="colorful-sky">
    <header>
      <h1 style="color: #2D4263;">随笔</h1>
      <p style="color: #305468; line-height: 1.8; letter-spacing: 0.5px;">
        字里行间藏着时光的碎片，笔端流转着心绪的微光<br>
        每一段随笔都是灵魂的低语，等你来读懂那些未曾言说的温柔
      </p>
    </header>
  </div>
  <div class="send-container">
    <textarea v-model="addForm.content" class="essay-input" placeholder="请写下你的随记"></textarea>
    <div class="btn">
      <button class="send-btn" @click="addEssay">发送</button>
    </div>
  </div>

  <a-spin tip="加载中..." :spinning="spinning">
    <div class="container composition-paper-bg">
      <div id="comments-container" class="comments-grid">
        <div class="comment-card" v-for="essay in essayList">
          <div class="comment-header">
            <a-avatar class="user-avatar" :src="essay.avatar"></a-avatar>
            <div class="user-info">
              <div class="user-name">{{ essay.createNickName }}</div>
              <div class="comment-date">{{ essay.createTime }}</div>
            </div>
          </div>
          <div class="comment-content">{{ essay.content }}</div>
        </div>
      </div>

      <div class="load-more-container">
        <button v-if="hasMore" id="load-more" @click="loadMoreEssays">加载更多</button>
        <div v-else class="end-notice">已至随笔尽头，故事暂歇于此</div>
      </div>
    </div>
  </a-spin>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {findEssayPage, sendEssay} from "@/api/essay.js";
import {message} from "ant-design-vue";

const spinning = ref(false);
const essayList = ref([]);
const hasMore = ref(false);
const queryForm = reactive({
  pageModel: {
    pageSize: 10,
    pageNow: 1,
    query: {},
    sort: ['1create_time']
  }
})
const addForm = reactive({
  content: '',
})
const totalCount = ref(0);

const getEssayList = async () => {
  spinning.value = true;
  await findEssayPage(queryForm).then(res => {
    if (res.code === 200) {
      totalCount.value = res.data.list.total;
      essayList.value = [...essayList.value, ...res.data.list.dataList];
      hasMore.value = totalCount.value > essayList.value.length;
      queryForm.pageModel.pageNow++;
      spinning.value = false;
    }
  }).catch(err => {
    console.log(err)
    spinning.value = false;
  })
}

const addEssay = () => {
  if (!localStorage.getItem('token')) {
    message.error('请先登录');
    return;
  }
  sendEssay(addForm).then(res => {
    if (res.code === 200) {
      message.success('发送成功')
      essayList.value = [res.data, ...essayList.value];
      addForm.content = '';
    }
  }).catch(err => {
    console.log(err)
  })
}

// 加载更多
const loadMoreEssays = async () => {
  await getEssayList();
}

// 组件挂载时初始化
onMounted(() => {
  getEssayList();
})
</script>

<style scoped lang="less">
.top-container {
  position: relative;

  .top-image {
    width: 100%;
    object-fit: cover;
    height: 45vh;
  }

  header {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
  }
}

.composition-paper-bg {
  width: 90%;
  max-width: 800px;
  min-height: 55vh;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  /* 稿纸网格样式 */
  background-image: /* 横向格子线 */ linear-gradient(to bottom, rgba(138, 135, 135, 0.08) 1px, transparent 1px),
    /* 纵向格子线 */ linear-gradient(to right, rgba(138, 135, 135, 0.08) 1px, transparent 1px);

  background-size: 100% 28px, /* 横向格子间距 */ 28px 100%; /* 纵向格子间距 */
}

/* 容器 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* 头部 */
header {
  text-align: center;
  margin-bottom: 3rem;
}

header h1 {
  color: var(--primary-color);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

header p {
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto;
}

/* 按钮 */
.load-more-container {
  text-align: center;
  margin-bottom: 3rem;
  margin-top: 10px;
}

#load-more {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 2rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#load-more:hover {
  background-color: #3A81D8;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(74, 144, 226, 0.2);
}

#load-more:active {
  transform: translateY(0);
}

#load-more.loading {
  cursor: not-allowed;
  opacity: 0.7;
}

#load-more.loading i {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 评论容器 */
.comments-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .comments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .comments-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 评论卡片 */
.comment-card {
  background-color: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  transition: 0.3s all linear;

  &:hover {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
  }
}

/* 评论头部 */
.comment-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* 用户头像 */
.user-avatar {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
}

.user-name {
  font-size: 1.1rem;
  font-weight: 600;
}

.comment-date {
  font-size: 0.85rem;
  color: var(--text-color3);
  margin-top: 5px;
}

/* 评论内容 */
.comment-content {
  color: var(--text-light);
  line-height: 1.6;
  white-space: pre-wrap; /* 保留换行符和空格，自动换行 */
  word-break: break-word; /* 防止长单词溢出 */
}

/* 到底啦提示样式 */
.end-notice {
  color: #7f8c8d;
  font-size: 0.95rem;
  text-align: center;
  padding: 1rem;
  letter-spacing: 0.5px;
  font-style: italic;
  position: relative;
  opacity: 0.8;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 1;
  }
}

/* 可选项：添加装饰性线条 */
.end-notice::before,
.end-notice::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background-color: #bdc3c7;
  vertical-align: middle;
  margin: 0 5px;
  transition: width 0.3s ease;
}

.end-notice:hover::before,
.end-notice:hover::after {
  width: 40px;
}

.send-container {
  text-align: center;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 10px;

  .essay-input {
    width: 100%;
    border: 1px solid rgba(224, 224, 224, 0.5);
    border-radius: 8px;
    resize: none;
    min-height: 100px;
    font-size: 15px;
    transition: border-color 0.3s;
    padding: 12px 15px;

    &:focus {
      outline: none;
      border-color: rgba(224, 224, 224, 1);
    }
  }

  .btn {
    display: flex;
    justify-content: flex-end;

    .send-btn {
      margin: 8px 0 10px 0;
      padding: 5px 10px;
      background-color: #4285f4;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 15px;
      transition: background-color 0.3s;

      &:hover {
        background-color: #3367d6;
      }
    }
  }
}

</style>